<template>
	<div class="adps_body" id="adps__body">
		<div class="adps_close"><div class="close_icon" id="close__icon">關閉</div></div>
		<div class="adps_content" id="adps__content"></div>
	</div>
</template>

<script setup>
import { onMounted } from 'vue';
import { useStore } from 'vuex';
import { mountComponent, endsTimeAnimation } from '../../globalJS.js';
let store = useStore();
let Url = store.state.TipsUrl;
onMounted(() => {
	let shadow = document.getElementById('window__shade');
	shadow.style.display = 'block';
	AddCloseEvent();
	mountComponent('#adps__content', Url);
});

function AddCloseEvent() {
	let closeEl = document.getElementById('close__icon');
	let shadow = document.getElementById('window__shade');
	closeEl.addEventListener('click', adpsCloseHandle);
	shadow.addEventListener('click', adpsCloseHandle);
}

function adpsCloseHandle() {
	let adpsEl = document.getElementById('adps__body');

	let shadow = document.getElementById('window__shade');

	let delay = endsTimeAnimation(adpsEl, 'remove_adps');

	let compuedAdpsEl = window.getComputedStyle(adpsEl);
	// console.log(compuedAdpsEl);
	adpsEl.style.setProperty('--width', compuedAdpsEl.width);
	adpsEl.style.setProperty('--height', compuedAdpsEl.height);

	setTimeout(() => {
		adpsEl.remove();
		shadow.style.display = 'none';
	}, delay);
}
</script>

<style scoped lang="scss">
.adps_body {
	min-width: 400px;
	min-height: 600px;
	position: absolute;

	background-color: red;

	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.adps_close {
	width: 100%;
	height: 40px;
}
.close_icon {
	width: 40px;
	height: 40px;

	margin: 0 0 0 auto;

	cursor: pointer;

	display: flex;
	justify-content: center;
	align-items: center;
}
.adps_content {
	width: 100%;
}
.remove_adps {
	animation-name: removeAdps;

	animation-duration: .8s;
	animation-delay: 0s;
	animation-fill-mode: forwards;
}
@keyframes removeAdps {
	0% {
		min-width: 0px;
		min-height: 0px;

		width: var(--width);
		height: var(--height);

		overflow: hidden;
	}
	30% {
		min-width: 0px;
		min-height: 0px;

		width: 400px;
		height: 0.2px;

		overflow: hidden;
	}
	100% {
		min-width: 0px;
		min-height: 0px;

		width: 0.2px;
		height: 0.2px;

		overflow: hidden;
	}
}
</style>
